<template>
    <div class="count">
        <h2>当前求和为：{{ countStore.sum }}</h2>
        <h3>学校名字：{{ countStore.school }},地址是：{{ countStore.address }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <button @click="add">加</button>
        <button @click="reduce">减</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import { useCountStore } from "@/store/count";

let n = ref(1)
const countStore = useCountStore()

function add() {
    // countStore.sum += n.value
    //触发方法 学校学校信息变中文
    // countStore.school = '硅谷'
    // countStore.address = '深圳'

    //批量修改
    // countStore.$patch({
    //     address:'北京',
    //     school:'这是学校3'
    // })

    //第三种方式
    countStore.increment(n.value);
    
}

function reduce() {

}


</script>

<style lang="scss" scoped>
.count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

select,
button {
    margin: 0 5px;
    height: 25px;
}
</style>
